<template>
  <div
    class="app-container"
    :class="device == 'mobile' ? 'mobile-container' : 'pc-container'"
  >
    <el-card class="box-card-b">
      <div class="box-card-b-item">
        <TitleHeader
          v-if="device == 'mobile'"
          title="AI摄像头"
          icon-name="el-icon-video-camera"
        />
        <TitleHeaderPc
          v-else
          title="AI摄像头"
          icon-name="el-icon-video-camera"
          route="remoteView"
        />
        <RemoteView class="item-data"></RemoteView>
      </div>
    </el-card>
    <el-card class="box-card max-heigh">
      <div class="app-box">
        <TitleHeader
          v-if="device == 'mobile'"
          title="AI远程反控入口"
          icon-name="el-icon-s-promotion"
        />
        <TitleHeaderPc
          v-else
          title="AI远程反控入口"
          route="remote"
          icon-name="el-icon-s-promotion"
        />
        <Remote class="item-data"> </Remote>
      </div>
    </el-card>
    <el-card class="box-card max-heigh">
      <div class="app-box">
        <TitleHeader
          v-if="device == 'mobile'"
          title="AI数据分析"
          icon-name="el-icon-s-data"
        />
        <TitleHeaderPc
          v-else
          title="AI数据分析"
          route="chart"
          icon-name="el-icon-s-data"
        />
        <Chart class="item-data" />
      </div>
    </el-card>
    <el-card class="box-card max-heigh">
      <div class="app-box">
        <TitleHeader
          v-if="device == 'mobile'"
          title="AI振动分析"
          icon-name="el-icon-loading"
        />
        <TitleHeaderPc
          v-else
          title="AI振动分析"
          route="alert"
          icon-name="el-icon-loading"
        />
        <Alert class="item-data"></Alert>
      </div>
    </el-card>
    <el-card class="box-card max-heigh">
      <div class="app-box">
        <TitleHeader
          v-if="device == 'mobile'"
          title="故障历史"
          icon-name="el-icon-date"
        />
        <TitleHeaderPc
          v-else
          title="故障历史"
          route="history"
          icon-name="el-icon-date"
        />
        <History class="item-data"></History>
      </div>
    </el-card>
    <el-card class="box-card max-heigh">
      <div class="app-box">
        <TitleHeader
          v-if="device == 'mobile'"
          title="2D图"
          icon-name="el-icon-help"
        />
        <TitleHeaderPc
          v-else
          title="2D图"
          route="dashboard"
          icon-name="el-icon-help"
        />
        <DashBoard class="item-data" />
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import DashBoard from "@/views/index.vue";
import Chart from "./chart.vue";
import Remote from "./remote.vue";
import History from "./history.vue";
import Alert from "./alert.vue";
import RemoteView from "./remoteView.vue";
import TitleHeader from "./components/titleHeader.vue";
import TitleHeaderPc from "./components/titleHeaderPc.vue";
export default {
  name: "Home",
  components: {
    DashBoard,
    Chart,
    Remote,
    History,
    Alert,
    RemoteView,
    TitleHeader,
    TitleHeaderPc,
  },
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["sidebar", "avatar", "device"]),
  },
  watch: {},
  created() {},
  methods: {},
};
</script>

<style scoped lang="scss">
.app-container {
  height: 100%;
  width: 100%;
  overflow: scroll;
}
// 公共参数
::v-deep .el-card__body {
  padding: 5px !important;
  height: 100%;
}
// 移动端参数
.mobile-container {
  padding: 5px !important;
  .box-card {
    margin-bottom: 5px;
  }
  .box-card-b {
    overflow: hidden;
    margin-bottom: 5px;
  }
  .app-box {
    max-height: 150vw !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .item-data {
    flex: 1;
    overflow: auto;
  }
}

// pc参数
.pc-container {
  padding: 0 10px !important;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  height: calc(100% - 24px);
  .box-card,
  .box-card-b {
    width: 32%;
    height: calc(50% - 24px);
    text-align: center;
  }
  .app-box {
    height: 100%;
  }
  .box-card-b-item {
    height: 100%;
  }
}
</style>
